<template>
  <view class="container">
    <uv-checkbox-group
      v-model="selectedValues"
      placement="column"
      @change="change"
    >
      <view
        v-for="(item, index) in dicttype"
        :key="index"
        class="checkbox-item"
      >
        <uv-checkbox
          :name="item.value"
          :label="item.label"
          shape="circle"
          size="20"
          activeColor="#FD754C"
        ></uv-checkbox>
      </view>
    </uv-checkbox-group>
    <view class="footer">
      <uv-button type="primary" @click="confirm" color="#FD754C"
        >确定</uv-button
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { dicttype } from "@/util/data";

const selectedValues = ref<string[]>([]);

onLoad((options: any) => {
  if (options.types) {
    selectedValues.value = JSON.parse(options.types);
  }
});

const change = (e: string[]) => {
  selectedValues.value = e;
};

const confirm = () => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1] as any;
  const eventChannel = page.getOpenerEventChannel();
  eventChannel.emit("acceptDataFromOpenedPage", {
    types: selectedValues.value,
  });
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.container {
  padding: 16rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}
.checkbox-item {
  background-color: #fff;
  padding: 24rpx;
  margin-bottom: 2rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}
</style>
